<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是App组件</h1>
  <input type="text" v-model="keyWord"/>
  <h3>{{ keyWord }}</h3>
</template>

<script>
// 引入ref 函数

import {customRef} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // 使用Vue提供的ref
    // let keyWord = ref('hello');

    // 使用程序员自定义的ref
    let keyWord = myRef('hello', 500);

    // 自定义一个ref-名称为：myRef
    function myRef(value, delay) {
      let timer; // 用于清除定时器
      console.log(value);
      return customRef((track, trigger) => {
        return {
          // 读取数据，调用get方法
          get() {
            console.log(`有人从myRef这个容器中读取数据了，我把${value}返回了。`);
            track(); // 追踪，通知Vue追踪value的变化，提前和get商量一下，让他认为这个value是有用的。
            return value;
          },
          // 修改数据，调用set方法
          set(newValue) {
            console.log(`有人把myRef这个容器中的数据改了：${value}。`);
            // 清除定时器
            clearInterval(timer);
            timer = setTimeout(() => {
              value = newValue;
              // 通知Vue去重新解析模板
              trigger(); // 触发器
            }, delay);
          }
        }
      });
    }

    return {
      keyWord,
    }
  }
}
</script>

<style>

</style>
